import React, { CSSProperties } from "react";
import { Image, View } from "@tarojs/components";
import { GStyleSheet, ThemeCompetent, DynamicColors } from "@/utils/DarkMode";
import titckIcon from "../assets/images/home_icon_set_device_check_white.png";

const dstyles = GStyleSheet.create({
  view: {
    width: 25,
    height: 25,
    borderRadius: 100,
    borderColor: "#fe9b45",
    borderWidth: 1,
    borderStyle: "solid",
    backgroundColor: "rgba(0,0,0,0)",
  },
  icon: {},
});

interface IProps {
  onPress?: () => void;
  style?: CSSProperties;
  checked: boolean;
}

@ThemeCompetent
class CheckBox extends React.Component<IProps, {}> {
  onPress = () => {
    const { onPress } = this.props;
    onPress && onPress();
  };

  render() {
    const styles = dstyles.style;
    const { style, checked } = this.props;
    const viewStyle = { ...styles.view, ...style };
    const { width } = viewStyle;
    viewStyle.height = width;
    // viewStyle.borderRadius = (width as number) / 2;
    viewStyle.borderColor = DynamicColors.tintColor.value;
    if (checked) {
      viewStyle.backgroundColor = DynamicColors.tintColor.value;
    }

    const iconStyle = {
      ...styles.icon,
      ...{
        width: (width as number) * 0.5,
        height: (width as number) * 0.5,
      },
    };
    return (
      <View onClick={this.onPress} style={viewStyle} className="centerFlex">
        {checked ? <Image style={iconStyle} src={titckIcon} /> : null}
      </View>
    );
  }
}

export default CheckBox;
